<template>
  <div>
    <el-table :data="goodList" style="width: 100%">
      <el-table-column prop="id" label="商品ID" width="180"></el-table-column>
      <el-table-column prop="inventory" label="商品库存" width="180">
        <template slot-scope="scope">
          <!-- {{ scope.row.inventory / Number(shopInventory) }} 
          加了进度条
          percentage绑定的值不能大于1
          -->
          <el-progress
            :text-inside="scope.row.inventory >= 1"
            :stroke-width="20"
            :percentage="(scope.row.inventory / shopInventory) * 100"
            status="exception"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        width="180"
      ></el-table-column>
      <el-table-column prop="price" label="单价" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-shopping-cart-2"
            @click="addToCart(scope.row)"
            :disabled="!user ? true : false"
            >加入购物车</el-button
          >
          <el-button @click="shopDetailsButton(scope.row.id)"> 详情 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Commodities",
  data() {
    return {
      user: localStorage.user,
    };
  },
  computed: {
    ...mapGetters(["goodList", "totalNum"]),
    ...mapState(["shopInventory"]),
  },
  methods: {
    ...mapMutations(["addToCart"]),
    shopDetailsButton(id) {
      this.$router.push(`/Commodity/${id}`);
    },
  },
};
</script>
<style scoped>
.lists {
  display: flex;
  position: relative;
}
.lists li {
  width: 350px;
  height: 200px;
  border: 1px solid rgb(255, 188, 3);
  margin: 20px;
  text-align: center;
}
.lists button {
  width: 100px;
  height: 30px;
  border-radius: 30px;
  background: linear-gradient(
    to right,
    rgba(255, 123, 0, 0.973),
    rgb(230, 153, 11)
  );
  color: white;
  border: none;
}
.lists div {
  margin-top: 80px;
}
</style>


